﻿const renderCover = () => {
    $('#preview-list').find('.preview-item').each((index, item) => {
        if (index === 0) {
            $(item).addClass("cover");
        } else {
            $(item).removeClass("cover");
        }
    })
}

$(function () {

    layui.use(['upload', 'element', 'layer'], function () {
        var $ = layui.jquery
            , upload = layui.upload
            , element = layui.element
            , layer = layui.layer;
        //多图片上传
        upload.render({
            elem: '.image-selector'
            , acceptMime:'image/*'
            , url: '/Files/Upload.aspx' //此处配置你自己的上传接口即可
            , multiple: true
            , auto: false
            , size: 20480
            , choose: function (obj) {
                var that = this;
                var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    let itemNode = $([
                        `<div class="layui-col-sm2 layui-col-md2" id="preview-item-${index}">` +
                        `<div class="preview-item">` +
                        `<img class="handle" id="preview-img-${index}" style="display: none;" />` +
                        `<div class="layui-progress" id="preview-progress-${index}" lay-filter="preview-progress-${index}">` +
                        '<div class="layui-progress-bar" lay-percent=""></div>' +
                        '</div>' +
                        '<div class="remove">' +
                        '<i class="layui-icon layui-icon-close"></i>' +
                        '</div>' +
                        '</div>' +
                        '</div>'
                    ].join(''));

                    itemNode.find('.remove').on('click', function () {
                        layer.confirm('是否确定删除图片？', {
                            btn: ['确定', '取消'] //按钮
                        }, function (confirmIndex) {
                            delete files[index];
                            $(`#preview-item-${index}`).remove()
                            layer.close(confirmIndex);
                            renderCover();
                        }, function () {

                        });
                    })
                    $('#preview-list').append(itemNode)
                    renderCover();
                    element.render('progress');
                    obj.upload(index, file);
                });
            }
            , done: function (res, index) {
                //上传完毕
                $(`#preview-progress-${index}`).hide();
                $(`#preview-img-${index}`).show().attr('src', res.url.substring(1, res.url.length))
                 $(`#preview-item-${index}`).attr('data',res.url)
            }, progress: function (n, elem, e, index) { //注意：index 参数为 layui 2.6.6 新增
                element.progress('preview-progress-' + index, n + '%');

            }
        });
    })

    $(function () {
        new Sortable(document.querySelector("#preview-list"), {
            animation: 350,
            onSort: (/**Event*/evt) => {
                renderCover()
            },
        });
    })

    //类型标签
    layui.config({
        base: '/Content/Scripts/'
    }).use(['inputTag'], function () {
        var inputTag = layui.inputTag;
        typeTag= inputTag.render({
            elem: '.typeTag',
            data: [...typeTagData],//初始值
            permanentData: [],//不允许删除的值
            removeKeyNum: 8,//删除按键编号 默认，BackSpace 键
            createKeyNum: 13,//创建按键编号 默认，Enter 键
            theme: "fairy-bg-info",
            beforeCreate: function (data, value) {//添加前操作，必须返回字符串才有效
                if (data.length < 3) {
                    return value;
                }
            },
            onChange: function (data, value, type) {
            }
        });

        $("#typeTag_id").find('.fairy-tag').on('click', function () {
            let value = this.innerText;
            typeTag.createItem(value)
        })
    })

    //风格标签
    layui.config({
        base: '/Content/Scripts/'
    }).use(['inputTag'], function () {
        var inputTag = layui.inputTag;
        styleTag = inputTag.render({
            elem: '.styleTag',
            data: [...styleTagData],//初始值
            permanentData: [],//不允许删除的值
            removeKeyNum: 8,//删除按键编号 默认，BackSpace 键
            createKeyNum: 13,//创建按键编号 默认，Enter 键
            theme: "fairy-bg-info",
            beforeCreate: function (data, value) {//添加前操作，必须返回字符串才有效
                if (data.length < 3) {
                    return value;
                }
            },
            onChange: function (data, value, type) {
            }
        });

        $("#styleTag_id").find('.fairy-tag').on('click', function () {
            let value = this.innerText;
            styleTag.createItem(value)
        })
    })

})

$(function () {
    const typeTagNodes = tagOptions.types.map(item=> `<span class="fairy-tag fairy-anim-fadein pointer">${item}</span>`).join("");
    $("#typeTag_id").append(typeTagNodes)

    const styleTagNodes = tagOptions.styles.map(item=> `<span class="fairy-tag fairy-anim-fadein pointer">${item}</span>`).join("");
    $("#styleTag_id").append(styleTagNodes)

})